<template>
    <layout-default
            name="follow"
            bg="white"
            :loaded="true">
        <div class="follow-list">
            <div class="l-item">
                <div class="i-wrap">
                    <div class="w-left">
                        <div class="l-avatar">
                            <img src="//cdn.kyeteo.cn/FpfQsM2ghNmiIJ89BHONjUZR80os" alt="">
                        </div>
                        <div class="l-info">
                            <div class="i-name">
                                <span>kyeteo码上闲谈</span>
                            </div>
                            <div class="i-saying">
                                <span>擅长web全栈开发，喜欢动漫和旅游。</span>
                            </div>
                            <div class="i-fans">
                                <span>粉丝:2541</span>
                            </div>
                        </div>
                    </div>
                    <div class="w-right">
                        <span>已关注</span>
                    </div>
                </div>
            </div>
        </div>
    </layout-default>
</template>

<style lang="less">
    .follow{
        .follow-list{
            .l-item{
                padding-left: 30px;
                .i-wrap{
                    position: relative;
                    display: flex;
                    align-items: center;
                    height: 200px;
                    padding-right: 30px;
                    .w-left{
                        display: flex;
                        .l-avatar{
                            width:140px;
                            height: 140px;
                            border-radius: 70px;
                            overflow: hidden;
                            img{
                                width:100%;
                                height: 100%;
                            }
                        }
                        .l-info{
                            width:400px;
                            box-sizing: border-box;
                            padding-left: 30px;
                            .i-name{
                                font-size: 36px;
                            }
                            .i-saying{
                                width: 100%;
                                span{
                                    display: inline-block;
                                    width: 100%;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    color:#71777c;
                                }
                            }
                            .i-fans{
                                span{
                                    color:#71777c;
                                }
                            }
                        }
                    }
                    .w-right{
                        position: absolute;
                        top:50%;
                        right:30px;
                        transform: translateY(-50%);
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width:120px;
                        height: 56px;
                        box-sizing: border-box;
                        border:1px solid #71777c;
                        border-radius: 5px;
                        span{
                            color:#71777c;
                        }
                    }
                }
                &:not(:first-child){
                    position: relative;

                    &::before {
                        position: absolute;
                        content: '';
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 0;
                        border-top: 1px solid rgba(219, 219, 219, 1);
                        transform: scaleY(0.5);
                    }
                }
            }
        }
    }
</style>

